<template>
	<view>
		<view class="u-flex u-row-right " style="padding: 20rpx 40rpx 0 ;color: #818DFF;" >
			
			<navigator url="../parse/index?id=24">
				规则说明
			</navigator>
			</view>
		<view style="width: 85%;height: 80vh;margin:40rpx auto;position: relative;">
			<swiper style="width: 100%;height: 100vh;" :current="current">
				<swiper-item v-for="(item,index) in list" :key="index" catchtouchmove="stopTouchMove">
					<image :src="item.cover" style="width: 100%;height: 80vh;"></image>
				</swiper-item>

			</swiper>
			<view class="dot">
				{{current+1}} / {{list.length}}
			</view>
		</view>



		<view class="u-flex u-row-around">
			<u-button shape="circle"
				:custom-style="{background:'#818DFF',color:'#fff',marginTop:'40rpx',width:'240rpx',marginBottom:'40rpx'}"
				@click="like(0)">
				不喜欢</u-button>

			<u-button shape="circle"
				:custom-style="{background:'#FF5D39',color:'#fff',marginTop:'40rpx',width:'240rpx',marginBottom:'40rpx'}"
				@click="like(1)">
				喜欢</u-button>


		</view>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
				],
				current: 0,
				selectArr: [],
				percent:"",
				name:""

			}
		},
		onLoad() {
			this.jiazai()
		},
		onShow() {

		},
		methods: {
			stopTouchMove: function() {

				return false;

			},
			async  like(e) {
				if (e) {
					this.selectArr = this.selectArr.concat(this.list[this.current].id)
					// this.selectArr = [...this.selectArr,...this.list[this.current].title];
				
				};
				if (this.current + 1 >= this.list.length) {
					if(!this.selectArr.length){
						uni.showToast({
							title:"请重新挑选喜欢的户型",
							duration:1500,
							icon:none,
							complete() {
								setTimeout(()=>{
									uni.navigateBack({
									})	
								},1500)
							}
						})
						return
					}
					uni.redirectTo({
						url:'./result?id='+this.selectArr
					})
					return
				}
				this.current += 1
			},
			
			jiazai() {
				this.$u.post('/index/beta', {

				}).then(res => {
					this.list = res
				}).catch(err => {

				})
			}
		}
	}
</script>

<style>
	.dot {
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
		background: rgba(0, 0, 0, 0.6);
		padding: 7rpx 15rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #FFFFFF;
		z-index: 999;
	}
</style>
